<script setup lang="ts">
import { Header, Nav, Set, Tab } from "@/components";
import { inject, onMounted, ref } from "vue";
import bus from "@/mitt";

onMounted(() => {});
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header> <Header></Header> </el-header>
      <el-container>
        <el-aside ><Nav></Nav></el-aside>
        <el-container>
          <el-footer><Tab></Tab></el-footer>
          <el-main
            ><div class="conter-l">
              <router-view class="router-view" /></div
          ></el-main>
        </el-container>
      </el-container>
    </el-container>
    <!-- <el-container>
      <el-aside><Nav></Nav></el-aside>
      <el-container  >
        <el-header class="header_class">
          <Header></Header> 
        </el-header>
        <Tab></Tab>
        <el-main>
            <div class="conter-l">
              <router-view class="router-view" />
            </div>
        </el-main>
      </el-container>
    </el-container> -->
    <Set></Set>
  </div>
</template> 
<style scoped lang="less" >
::v-deep(.common-layout) {
  width: 100vw;
  height: 100vh;
}
::v-deep(.el-menu--collapse) {
  height: 100vh !important;
}
::v-deep(.el-aside) {
  height: calc(100vh - 50px) !important;
  width: var(--el-aside-width, 170px) !important;
}
::v-deep([role="menubar"]) {
  height: calc(100vh - 50px) !important;
}
::v-deep(.el-header) {
  height: 50px;
  --el-header-padding: -4 20px !important;
}
::v-deep(.el-main) {
  width: 100%;
  height: calc(100vh - 120px) !important;
  background-color: #f0f2f7;
}
::v-deep(.el-footer){
  padding: 0;
  --el-footer-height: 48px
}
::v-deep(.el-tabs--card>.el-tabs__header .el-tabs__nav){
  background: none;
  border: none;
}
::v-deep(.el-tabs__header .el-tabs__item){
  background: none !important;
  border-left: none !important;
}
</style>
